<template>
	<card :cardHeight="cardHeight" cardTitle="出/入栏统计" :noMore="noMore" @showDetails="showDetails()">
		<Chart :optionData="option_column" style="height: 100%; padding-bottom: 10px"></Chart>
		<!-- <v-chart :option="option_column" style="height: 100%;padding-bottom: 10px;" autoresize></v-chart> -->
	</card>
</template>

<script>
import StatisticsMixins from '../StatisticsMixins';
import { mortgageapi } from '@/api/index.js';
export default {
	name: 'barChart',
	mixins: [StatisticsMixins],
	data() {
		return {
			option_column: {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					show: true,
					formatter: function (param) {
						let name = param[0].name;
						let income = param[0].value;
						let out = param[1].value;
						let dies = param[2].value;
						return (
							'<div>' +
							name +
							'</div>' +
							'<div style="margin:0 9px; display:flex;justify-content: space-between;align-items: center;"><i style="height:10px;width:10px;border-radius: 50px;background:#48A2FE;display:block;margin-right:10px"></i><span style="flex:1">' +
							param[0].seriesName +
							'</span><span style="color:#06706C;font-weight:bold;font-size: 16px;">' +
							income +
							'</span>头</div>' +
							'<div style="margin:0 9px; display:flex;justify-content: space-between;align-items: center;"><i style="height:10px;width:10px;border-radius: 50px;background:#4AD1CC;display:block;margin-right:10px"></i><span style="flex:1">' +
							param[1].seriesName +
							'</span><span style="color:#06706C;font-weight:bold;font-size: 16px;">' +
							out +
							'</span>头</div>' +
							'<div style="margin:0 9px; display:flex;justify-content: space-between;align-items: center;"><i style="height:10px;width:10px;border-radius: 50px;background:#FFAE78;display:block;margin-right:10px"></i><span style="flex:1">' +
							param[2].seriesName +
							'</span><span style="color:#06706C;font-weight:bold;font-size: 16px;">' +
							dies +
							'</span>头</div>'
						);
					}
				},
				legend: {
					data: ['入栏', '出栏', '死淘', '总数'],
					itemGap: 50, // 图列项之间的间距
					selectedMode: false,
					top: 'bottom',
					itemWidth: 14,
					itemHeight: 14
				},
				grid: {
					//   top: '3%',
					left: '3%',
					right: '4%',
					bottom: '10%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: [],
					name: '单位 (月)'
				},
				yAxis: {
					nameTextStyle: {
						fontSize: 12,
						fontWeight: 800,
						color: '#7E848A'
					},
					type: 'value',
					minInterval: 1,

					name: '单位 (头)'
				},
				series: [
					{
						name: '入栏',
						type: 'line',
						smooth: true,
						data: [],
						itemStyle: {
							color: '#48A2FE'
						}
					},
					{
						name: '出栏',
						type: 'line',
						smooth: true,
						data: [],
						itemStyle: {
							color: '#4AD1CC'
						}
					},
					{
						name: '死淘',
						type: 'line',
						smooth: true,

						data: [],
						itemStyle: {
							color: '#FFAE78'
						}
					}
				]
			}
		};
	},
	computed: {
		noMore() {
			return !this.$_has('basicinfo:oper_apply:page');
		}
	},
	methods: {
		getInfo() {
			this.$postAction(mortgageapi.echartsUrl.quarterCount + '?year=' + new Date().getFullYear() + '&orgId=' + this.globalOrgId).then(da => {
				if (da.code == 1) {
					let list = da.data;
					let title = [],
						lairageCountList = [],
						publishCountList = [],
						monthList = [],
						dieCountList = [];

					for (var i = 0; i < list.length; i++) {
						title.push(list[i].quarter);
						lairageCountList.push(list[i].lairageCount);
						monthList.push(list[i].month + '月');
						publishCountList.push(list[i].publishCount);
						dieCountList.push(list[i].weedOutCount);
					}
					let option_column = { ...this.option_column };
					option_column.xAxis.data = [...monthList];
					option_column.series[0].data = lairageCountList;
					option_column.series[1].data = publishCountList;
					option_column.series[2].data = dieCountList;
					// console.log(lairageCountList, publishCountList, dieCountList);
					//   option_column.series[1].label.normal.formatter = (param) => {
					//     return param.value - option_column.series[0].data[param.dataIndex] + '头';
					//     console.log('param', param);
					//   };
					//   option_column.series[2].label.normal.formatter = (param) => {
					//     return param.value - option_column.series[1].data[param.dataIndex] + '头';
					//     console.log('param', param);
					//   };
					this.option_column = { ...option_column };
				}
			});
		},
		showDetails() {
			this.$router.push({
				path: '/cowManage/saleOrdieApplylist'
			});
		}
	}
};
</script>
